<template>
    <div class="c-dialog">
        <el-dialog
                v-model="dialogVisible"
                :title="title"
                :width="`${width}px`" :top="`${top}px`" :fullscreen="fullscreen"
                :close-on-click-modal="false" :custom-class="className" modal-append-to-body
                :before-close="handleClose">
            <template #title style="cursor: default;">
                <span class="title">{{title}}</span>
                <span class="fullscreen" @click="handleFullscreen">
<!--                    <i :class="['iconfont', `hlm-icon-${fullscreen?'tuichuquanping':'quanping'}`]"></i>-->
                </span>
            </template>
            <div :style="{maxHeight:`${contentHeight}px`}"
                 style="word-wrap: break-word;overflow-x: hidden;" v-if="!isMin">
                <slot></slot>
            </div>
            <div :style="{minHeight:`${contentHeight}px`}"
                 style="word-wrap: break-word;overflow-x: hidden;" v-else>
                <slot></slot>
            </div>
            <template #footer>
                <span class="dialog-footer">
                   <slot name="footer-btn-left"></slot>
                    <el-button v-if="action.includes('cancel')" @click="handleCancel">{{btnCancel}}</el-button>
                    <el-button v-if="action.includes('ok')" type="primary" @click="handleOk">{{btnOk}}</el-button>
                    <slot name="footer"></slot>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import {ref,computed} from 'vue'

    export default {
        name: "c-dialog",
        props: {
            initTitle: String,
            initShow: { // 是否显示
                type: Boolean,
                required: true
            },
            initWidth: {
                type: Number,
                default: 800
            },
            initTop: { // 距离上方高度
                type: Number,
                default: 60
            },
            initIsModal: { // 遮罩
                type: Boolean,
                default: true
            },
            initIsTransfer: { // 是否嵌套body中
                type: Boolean,
                default: true
            },
            initHeight: {
                type: Number
            },
            initAction: {
                type: Array,
                default() {
                    return ['cancel', 'ok'];
                }
            },
            initBtnCancel: {
                type: String,
                default: '取消'
            },
            initBtnOk: {
                type: String,
                default: '确定'
            },
            loading: {
                type: Boolean,
                default: false
            },
            initClassName: {
                type: String,
                default: ''
            },
            initIsMin: {
                type: Boolean,
                default: false
            }
        },
        setup(props) {
            const fullscreen = ref(false)
            const dialogVisible = ref(props.initShow)
            const title = ref(props.initTitle)
            const contentHeight = computed(()=>{
                return 200
            })
            const isMin = ref(props.initIsMin);
            const width = ref(props.initWidth);
            const top = ref(props.initTop);
            const isModal = ref(props.initIsModal);
            const isTransfer = ref(props.initIsTransfer);
            const height = ref(props.initHeight);
            const action = ref(props.initAction);
            const btnCancel = ref(props.initBtnCancel);
            const btnOk = ref(props.initBtnOk);
            const className = ref(props.initClassName);
            console.log(title);
            const handleClose = (done)=>{
                console.log(done);
            }
            const handleCancel = () => {
                dialogVisible.value = false
                console.log('cancel');
            }
            const handleOk = ()=>{
                console.log('ok')
            }
            const handleFullscreen=()=>{
                console.log('fullscreen')
            }
            return {
                fullscreen,
                dialogVisible,
                contentHeight,
                width,
                top,
                isModal,
                isTransfer,
                height,
                action,
                btnCancel,
                btnOk,
                className,
                title,
                isMin,
                handleCancel,
                handleClose,
                handleOk,
                handleFullscreen
            }
        }

    }
</script>

<style scoped>

</style>
